<template>
  <div class="smart-qa-container">
    <!-- 聊天区域 -->
    <div class="chat-area" :class="{ 'has-message': messages.length > 0 }">
      <el-scrollbar ref="scrollbar" class="message-list">
        <div
            v-for="(msg, index) in messages"
            :key="index"
            :class="['message', msg.type]"
        >
          <div class="message-avatar">
           
          </div>
          <div class="message-content">
          
            <div class="message-text">
              <el-tag
                  v-if="msg.loading"
                  type="info"
                  effect="plain"
                  class="loading-tag"
              >
                <i class="el-icon-loading"></i>
                {{ modelLoadingTexts[currentModel] }}
              </el-tag>
              <pre v-else>{{ msg.text }}</pre>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>

    <!-- 输入区域 -->
    <div class="input-area" :class="{ 'bottom-fixed': messages.length > 0 }">
      <div class="input-wrapper">
        <el-input
            v-model="userInput"
            type="textarea"
            :rows="4"
            placeholder="请输入您需要提问的问题"
            resize="none"
            @keyup.enter.native="sendQuestion"
            class="input-box"
        >
        </el-input>

        <div class="button-group">
          <div class="model-selector">
            <!-- 自定义模型选择按钮 -->
            <div class="model-btn-group">
              <div 
                :class="['model-btn', currentModel === 'local' ? 'active' : '']"
                @click="switchModel('local')"
                style="width: 100px; height: 32px;"
              >
                <img src="@/assets/images/icon_computer.png" class="model-icon" /> 本地模型
              </div>
              <div 
                :class="['model-btn', currentModel === 'cloud' ? 'active' : '']"
                @click="switchModel('cloud')"
                style="width: 100px; height: 32px;"
              >
                <img src="@/assets/images/icon_network_a.png" class="model-icon" /> 联网模型
              </div>
              <div 
                :class="['model-btn', currentModel === 'custom' ? 'active' : '']"
                @click="switchModel('custom')"
                style="width: 100px; height: 32px;"
              >
                <img src="@/assets/images/icon_self_a.png" class="model-icon" /> 自研模型
              </div>
            </div>
          </div>

          <el-button
              type="primary"
              class="send-button"
              @click="sendQuestion"
              style="width: 80px; height: 32px;"
          >
            智能对话
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      modelNames: {
        local: '本地模型',
        cloud: '联网模型',
        custom: '自研模型'
      },
      currentModel: 'local',
      modelStatus: '',
      modelLoadingTexts: {
        local: '本地模型处理中...',
        cloud: '联网查询中，可能需要更长时间...',
        custom: '自研模型深度分析中...'
      },
      userInput: '',
      messages: [],
      userAvatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png',
      aiAvatar: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
    }
  },

  mounted() {
    this.initComponent()
  },

  methods: {
    initComponent() {
      this.modelStatus = this.getModelStatus(this.currentModel)
    },
    switchModel(modelId) {
      this.currentModel = modelId
      this.modelStatus = this.getModelStatus(modelId)
      this.messages = []
    },
    getModelStatus(modelId) {
      const statusMap = {
        local: '本地模型：快速响应，适合简单问题',
        cloud: '联网模型：需要网络连接，获取最新信息',
        custom: '自研模型：专业农业知识库，深度分析'
      }
      return statusMap[modelId] || ''
    },
    sendQuestion() {
      const question = this.userInput.trim()
      if (!question) return

      const currentTime = new Date()
      const userMsg = {
        type: 'user',
        text: question,
        time: currentTime
      }
      this.messages.push(userMsg)
      this.userInput = ''

      this.$nextTick(() => {
        this.scrollToBottom()
      })

      const loadingMsg = {
        type: 'ai',
        text: '',
        time: currentTime,
        loading: true
      }
      this.messages.push(loadingMsg)

      this.$nextTick(() => {
        this.scrollToBottom()
      })

      setTimeout(() => {
        const answer = this.generateModelResponse(this.currentModel, question)
        const answerMsg = {
          type: 'ai',
          text: answer,
          time: new Date()
        }

        const lastIndex = this.messages.length - 1
        if (this.messages[lastIndex].loading) {
          this.messages[lastIndex] = answerMsg
        } else {
          this.messages.push(answerMsg)
        }

        this.$nextTick(() => {
          this.scrollToBottom()
        })
      }, 800)
    },
    generateModelResponse(modelId, question) {
      const baseResponses = [
        '这是针对您的问题的专业回答，基于大量数据训练得出。',
        '经过分析，建议如下：...',
        '根据现有知识，可以得出以下结论：...'
      ]

      const modelSpecific = {
        local: '本地模型使用本地知识库快速响应：',
        cloud: '联网模型查询最新数据后回答：',
        custom: '自研农业模型深度分析后得出：'
      }

      return `${modelSpecific[modelId]}\n\n${baseResponses[modelId % baseResponses.length]}\n\n（模拟响应）`
    },
    scrollToBottom() {
      const scrollbar = this.$refs.scrollbar
      if (scrollbar && scrollbar.wrap) {
        scrollbar.wrap.scrollTop = scrollbar.wrap.scrollHeight
      }
    },
    formatTime(date) {
      const d = new Date(date)
      return `${d.getHours()}:${d.getMinutes().toString().padStart(2, '0')}`
    }
  }
}
</script>

<style>
.smart-qa-container {
  display: flex;
  flex-direction: column;
  height: 92vh;
  max-height: 92vh;
  background-color: #EBEFF2;
  position: relative;
}

.chat-area {
  flex: 1;
  padding: 20px;
  width: 900px;
  margin: 15px auto 0;
  background-color: #EBEFF2;
  border-radius: 4px;
  overflow: hidden;
  display: none;
}
.chat-area.has-message {
  display: block;
}

.message-list {
  height: 100%;
}

.message {
  display: flex;
  margin-bottom: 25px;
}
.message.user {
  justify-content: flex-end;
}
.message.ai {
  justify-content: flex-start;
}

.message-avatar {
  flex-shrink: 0;
  margin: 0 15px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.message-content {
  max-width: 70%;
}
.user .message-content {
  margin-left: auto;
}
.ai .message-content {
  margin-right: auto;
}

.message-header {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
}
.sender {
  font-weight: bold;
  margin-right: 10px;
  font-size: 14px;
}
.time {
  font-size: 12px;
  color: #999;
}

.message-text {
  font-size: 14px;
  line-height: 1.6;
}
.message-text pre {
  white-space: pre-wrap;
  word-break: break-word;
  background-color: #f5f5f5;
  padding: 12px;
  border-radius: 4px;
  margin: 0;
}
.loading-tag {
  margin-top: 5px;
}


.input-area {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 900px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.input-area.bottom-fixed {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 900px;
  margin: 0 auto 20px;
}

.input-wrapper {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.button-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
}


.model-btn-group {
  display: flex;
  gap: 8px;
}

.model-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-left: -1px;
  border-radius: 4px;
  background-color: #EEF4FA;
  border: 1px solid transparent;
  font-size: 12px;
  color: #333;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.model-btn.active {
  background-color: #fff !important;
  border: 1px solid #1890FF !important;
  color: #1890FF;
}
/* 按钮图标往左移动1px */
.model-icon {
  width: 12px;
  height: 12px;
  margin-left: -2px;
  vertical-align: middle;
  filter: none;
  transition: filter 0.2s ease;
}
.model-btn.active .model-icon {
  filter: brightness(0) saturate(100%) invert(40%) sepia(93%) saturate(346%) hue-rotate(191deg) brightness(97%) contrast(94%);
}

.send-button {
  padding: 4px 16px;
  font-size: 12px;
  background-color: #1890FF;
  border: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.input-box {
  border-radius: 4px;
  border: 0 solid #ACB9CD;
}

.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>